<template>
    <div class="head">
        <div class="left-head">
            高校成绩管理系统
        </div>
        <div class="center-head">
            <div style="display:flex">
                <img src="../../images/zh-cn.png" style="width:40px;height:30px">
                <span style="margin-top:2px">欢迎{{personIfno.name+personIfno.identity}}!</span>
            </div>
        </div>
        <div class="right-head" @click="exit">
            退出登录
        </div>
    </div>
</template>
<script>
export default {
    name:'topHead',
    props: {
      personIfno:{
        type:Object,
        required:true
      }
    },
    methods:{
        exit(){
            const qr = confirm('确认退出吗?')
            if(qr){
                sessionStorage.removeItem('token');
                sessionStorage.removeItem('code');
                sessionStorage.removeItem('identity');
                sessionStorage.removeItem('grade');
                this.$router.push({
                    path:'/loginPage'
                })
            }
        }
    }
}
</script>
<style lang="less" scoped>
    .head{
        height: 50px;
        width: 100%;
        background-color: black;
        color: white;
        display: flex;
        justify-content: space-between;
        .left-head{
            font-size: 20px;
            padding-top: 10px;
            margin-left: 20px;
        }
        .center-head{
            padding-top: 10px;
        }
        .right-head{
            padding-top: 15px;
            margin-right: 20px;
        }
    }
</style>